<template>
	<div>
	  <div class="r-upload-list">
  		<div v-if="typeof list == 'string' && list" class="r-rchart-imglist">
          <img :src="list" />
          <div class="r-rchart-delete" @click="intDelImg('')"><i class="iconfont icon-delete8e"></i></div>
        </div>

  		<div v-else class="r-rchart-imglist" v-for="item,index in list" :key="index">
          <img :src="item" />
          <div class="r-rchart-delete" @click="intDelImg(index)"><i class="iconfont icon-delete8e"></i></div>
        </div>

        <div v-if="list.length < limit" class="r-rchart-upload" @click="intClick">
          <i class="iconfont icon-add2"></i>
          上传图片
        </div>
      </div>
      <span class="r-item-tips">建议尺寸为768*500像素，大小小于2M</span>
      <input type="file" style="display: none;" id="uploadImg" @change="intUpload($event)" />
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				data:{
					image_list:[]
				}
			}
		},
		props:{
			value:{
				type:[Array,String],
				default:() => {
					return [];
				}
			},
			limit:{
				type:Number,
				default:1
			}
		},
		computed:{
			list:{
				get(){
					return  this.value ;
				},
				set(val){
					this.$emit('input',val);
				}
			}
		},
		methods:{
			intDelImg(index){
				if(typeof index == 'number'){
					this.list.splice(index,1);
				}else{
					this.list = '';
				}
			},
			intClick(){
				document.getElementById('uploadImg').click();
			},
			async intUpload(event){
				if(event.target.files.length == 0){
					return false;
				}
		      	let img = await this.$cloud.upload(event.target.files[0]);
		      	if(img){
		      		if(typeof this.value == 'string'){
		      			this.list = img;
		      		}else{
		      			this.list.push(img);	
		      		}
		      	}else{
		        	this.$Message.error('网络异常，请稍后重试！')
		      	}
			}
		}
	}
</script>
<style type="text/css" lang="less">
.r-upload-list{
  display:flex;
  justify-content: flex-start; 
  align-items: center;
  >div{
    margin-right: 10px;
  }
}
</style>